<template>
  <div v-loading="loading" class="dashboard-container">
    <div class="app-container">
      <el-card class="tree-card">
        <!-- 用了一个行列布局 -->
        <tree-tools :node-data="titleData" @toggleBox="isShow" />
        <el-tree :data="departs" :props="defaultProps">
          <!-- 中间的代码就是插槽内容，用于定制每一行的布局效果 -->
          <!-- scope接收的是<el-tree>里 :data传过来的值 -->
          <template v-slot="scope">
            <tree-tools :node-data="scope.data" @on-success="OnSuccess" @toggleBox="isShow" />
          </template>
        </el-tree>
      </el-card>

    </div>
    <!-- 添加部门的弹窗 -->
    <!-- 属性绑定的sync修饰符作用：实现父子传值的**双向绑定** -->
    <add-dept :operate-type="operateType" :is-show-dept.sync="isShowDept" :current-pid="currentPid" :dlist="dlist" @on-success="OnSuccess" />
  </div>
</template>

<script>
import { reqGetDepartments } from '@/api/departments'
import AddDept from './components/AddDept'
import TreeTools from './components/TreeTools'

export default {
  components: {
    TreeTools,
    AddDept

  },
  data () {
    return {
      // 控制添加弹窗显示
      isShowDept: false,
      currentPid: '',
      dlist: [],
      operateType: 'add',
      loading: false,

      // 顶部标题的数据
      titleData: {
        id: '',
        name: '江苏传智播客教育科技股份有限公司',
        manager: '负责人',
        root: true
      },
      // 部门列表数据
      departs: [
        {
          name: '总裁办',
          manager: '曹操',
          children: [{ name: '董事会', manager: '曹丕' }]
        },
        { name: '行政部', manager: '刘备' },
        { name: '人事部', manager: '孙权' }
      ],
      defaultProps: {
        label: 'name',
        children: 'children'
      }
    }
  },
  created () {
    this.loadDepartments()
  },
  methods: {
    async loadDepartments () {
      try {
        this.loading = true
        // 调用接口
        const ret = await reqGetDepartments()
        // 公司名字赋值
        this.titleData.name = ret.data.companyName
        // 原始数据
        this.dlist = ret.data.depts
        // 把列表数据转换为树形数据
        this.departs = this.translateListToTreeData(ret.data.depts, '')
      } catch {
        this.$message.error('获取组织架构数据失败')
      } finally {
        this.loading = false
      }
    },
    // 把列表数据结构转换为树形数据结构
    // 找到当前部门（根据部门id）的所属的所有子部门
    translateListToTreeData (list, id) {
      // 遍历每一个元素，并且判断每一项pid是否可以参数的pid一致，这样可以找到参数pid所属的下属部门
      const arr = []
      list.forEach(item => {
        // 第一轮找到的是所有的一级节点
        if (item.pid === id) {
          // 如果当前部门和父级部门匹配，再去找当前部门的下级部门
          // children就是item的下级所有部门
          const children = this.translateListToTreeData(list, item.id)
          if (children && children.length > 0) {
            // 证明找到了当前部门的子部门
            item.children = children
          }
          arr.push(item)
        }
      })
      return arr
    },
    // 删除部门之后重新拉取数据
    OnSuccess () {
      this.loadDepartments()
    },
    // 控制弹窗显示
    isShow (info) {
      this.isShowDept = info.isShow
      this.currentPid = info.pid
      this.operateType = info.type
    }
  }

}
</script>

<style scoped>
.tree-card {
  padding: 30px 30px;
  font-size: 14px;
}
</style>
